<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="提现"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <!-- 提现输入组件 -->
            <div class="withdraw-cash-box">
                <div class="withdraw-cash-main">
                    <span class="withdraw-cash-name">提现金额</span>
                    <span class="withdraw-cash-symbol">￥</span>
                    <input
                        id="withdraw-cash"
                        type="number"
                        min="100"
                        step="100"
                        placeholder="输入提现金额"
                        v-model="withdrawMoney"
                    />
                </div>
                <div class="user-account-box">用户可用余额{{accountMoney | currency}}元</div>
            </div>
            <!-- 提现输入组件 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <!-- 确认提现组件 -->
        <div
            class="withdraw-btn"
            @click="sureWithdraw"
        >确认提现</div>
        <!-- 确认提现组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'WithdrawCash',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '1.3rem'
            },
            accountMoney: 0,
            withdrawMoney: ''
        }
    },
    mounted() {
        this.getAccountInfo()
    },
    methods: {
        getAccountInfo() {
            this.axios.post('/api/user/data.json').then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.accountMoney = data.data.money
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        testMoney() {
            if (this.withdrawMoney == 0 || this.withdrawMoney % 100 != 0) {
                this.commonDialog.alert(
                    '提示',
                    '最低提现金额为100元，提现金额必须为100的倍数'
                )
                this.withdrawMoney = ''
                return
            }
        },
        sureWithdraw() {
            if (this.withdrawMoney == '') {
                this.commonDialog.alert('提示', '请输入提现金额')
                return
            }
            if (this.withdrawMoney > this.accountMoney / 100) {
                this.commonDialog.alert('提示', '您的余额不足！')
                return
            }
            if (this.withdrawMoney == 0 || this.withdrawMoney % 100 != 0) {
                this.commonDialog.alert(
                    '提示',
                    '最低提现金额为100元，提现金额必须为100的倍数'
                )
                return
            }
            this.$router.push({
                path: '/userCenter/withdraw',
                query: {
                    withdrawMoney: this.withdrawMoney
                }
            })
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.withdraw-cash-box
    padding 0 0.37rem
    background #fff
    .withdraw-cash-main
        position relative
        height 3.2rem
        .withdraw-cash-name
            position absolute
            top 0.92rem
            left 0
            font-size 0.38rem
            color #666
        .withdraw-cash-symbol
            position absolute
            top 2.03rem
            left 0.3rem
            font-size 0.74rem
            color #666
        #withdraw-cash
            position absolute
            top 1.85rem
            left 1.1rem
            width 5.3rem
            font-size 0.74rem
            color #666
    .user-account-box
        height 1.11rem
        line-height 1.11rem
        padding 0 0.37rem
        font-size 0.33rem
        color #999
        border-top 1px solid #e5e5e5
        box-sizing border-box
.withdraw-btn
    position absolute
    bottom 0
    left 0
    right 0
    height 1.3rem
    line-height 1.3rem
    text-align center
    font-size 0.38rem
    color #fff
    background #d7463c
</style>


